import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class FlutterSwiperPage extends StatefulWidget {
  final Map<String, dynamic> arguments;
  FlutterSwiperPage({Key key, this.arguments}) : super(key: key);

  @override
  _FlutterSwiperPageState createState() => _FlutterSwiperPageState();
}

class _FlutterSwiperPageState extends State<FlutterSwiperPage> {
  final List<String> _imgUrls = [
    'http://hiphotos.qianqian.com/ting/pic/item/838ba61ea8d3fd1fb4912e42354e251f95ca5f2a.jpg',
    'http://hiphotos.qianqian.com/ting/pic/item/b3119313b07eca80b93485cf932397dda14483e1.jpg',
    'http://hiphotos.qianqian.com/ting/pic/item/eac4b74543a9822659d378408982b9014a90eb43.jpg',
    'http://hiphotos.qianqian.com/ting/pic/item/30adcbef76094b36a098488aa0cc7cd98d109d4a.jpg',
    'http://hiphotos.qianqian.com/ting/pic/item/728da9773912b31b106b9e4e8518367adab4e156.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlutterSwiperPage'),
      ),
      body: ListView(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.width / 2.0,
            child: Swiper(
              itemCount: this._imgUrls.length,
              autoplay: true, // 自动播放
              autoplayDelay: 3000, // 轮播间隔
              duration: 300, // 切换动画时间
              autoplayDisableOnInteraction: true, // 用户拖拽时 是否停止播放
              itemBuilder: (BuildContext context, int index) {
                return Image.network(
                  this._imgUrls[index],
                  fit: BoxFit.cover,
                );
              },
              pagination: SwiperPagination(
                alignment: Alignment.bottomLeft, // 指示器位置
                margin: EdgeInsets.only(left: 50.0, bottom: 10.0), // 调整指示器位置

                // 1) DotSwiperPaginationBuilder 默认圆点指示器

                // builder: DotSwiperPaginationBuilder(
                //   color: Colors.grey,
                //   activeColor: Colors.red,
                //   size: 10.0,
                //   activeSize: 8.0,
                //   space: 4.0,
                // ),

                // 2) SwiperCustomPagination 自定义指示器

                builder: SwiperCustomPagination(
                  builder: (BuildContext context, SwiperPluginConfig config) {
                    return Wrap(
                      spacing: 5.0,
                      children: (() {
                        List<Widget> dots = List();
                        for (var i = 0; i < config.itemCount; i++) {
                          if (config.activeIndex == i) {
                            dots.add(_DotIndicator(active: true));
                          } else {
                            dots.add(_DotIndicator(active: false));
                          }
                        }
                        return dots;
                      })(),
                    );
                  },
                ),
              ),
              control: SwiperControl(), // 左右前头等可点击触发左右播放
              onTap: (index) {
                print('onTap: $index');
              },
              onIndexChanged: (index) {
                print('onIndexChanged: $index');
              },
            ),
          )
        ],
      ),
    );
  }
}

/// 指示器单个小点
class _DotIndicator extends StatelessWidget {
  final bool active;
  const _DotIndicator({Key key, @required this.active}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final dotSize = 7.5;
    if (this.active) {
      return Image.asset('resources/images/others/banner/dot_normal.png', width: dotSize, height: dotSize);
    } else {
      return Image.asset('resources/images/others/banner/dot_current.png', width: dotSize, height: dotSize);
    }
  }
}
